<template>
  <div>
    <el-row>
      <el-col :span="6" :offset="1">
        <el-input
          v-model="page.message"
          placeholder="请输入标题或内容查找"
        ></el-input>
      </el-col>
      <el-col :span="2">
        <el-button icon="el-icon-search" @click="search" type="success"
          >搜索
        </el-button>
      </el-col>
      <el-col :span="2">
        <el-button icon="el-icon-delete" @click="reset" type="info"
          >重置
        </el-button>
      </el-col>
      <el-col :span="3" :offset="10"
        ><el-button type="warning" @click="handleAdd"
          >添加公告</el-button
        ></el-col
      >
    </el-row>
    <el-empty
      v-if="noticeList.length == 0 ? true : false"
      description="暂无公告"
    ></el-empty>
    <!-- 公告展示板块开始 -->
    <div v-if="noticeList.length == 0 ? false : true">
      <div
        v-for="(item, index) in noticeList"
        :key="index"
        style="width: 360px; display: inline-block; margin: 20px 10px"
      >
        <el-card style="color: #3f4b4b; height: 400px">
          <div slot="header">
            <span
              v-html="item.title"
              style="font-size: 18px; font-weight: 600"
            ></span
            ><br />
            <span style="color: #6e7474; font-size: smaller">{{
              item.time
            }}</span>
          </div>
          <div
            v-html="item.content"
            style="
              padding-bottom: 10px;
              text-indent: 2em;
              border-bottom: 1px solid #d4d7da;
            "
          ></div>
          <br />
          <div>
            <el-button
              slot="reference"
              type="text"
              size="small"
              @click="handleEdit(item.id)"
              >编辑</el-button
            >&nbsp;&nbsp;&nbsp;
            <el-popconfirm
              title="确认删除？"
              confirm-button-text="确认"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              @confirm="handleDelete(item.id)"
            >
              <el-button
                slot="reference"
                type="text"
                size="small"
                style="color: red"
                >删除</el-button
              >
            </el-popconfirm>
          </div>
        </el-card>
      </div>
      <!-- 分页开始 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[9, 21, 27, 36]"
          :page-size="page.pageSize"
          layout="total, prev, pager, next, sizes"
          :total="page.total"
        >
        </el-pagination>
      </div>
      <!-- 分页结束 -->
    </div>
    <!-- 公告展示板块结束 -->
    <el-dialog
      title="公告内容"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-input
        v-model="notice.title"
        placeholder="请输入公告标题"
        maxlength="17"
      >
      </el-input>
      <br /><br />
      <el-input
        type="textarea"
        resize="none"
        :rows="5"
        placeholder="请输入公告内容"
        maxlength="200"
        show-word-limit
        v-model="notice.content"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveNotice">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getNotices,
  deleteNotice,
  getNotice,
  noticeSave,
} from "../api/noticeMG";
export default {
  name: "NoticeView",
  data() {
    return {
      dialogVisible: false,
      page: {
        currentPage: 1, //当前页是第几页
        pageSize: 9, //每页最多多少条
        total: 0, //总共多少条
        message: "", //查询的标题或内容
      },
      noticeList: [],
      notice: {},
    };
  },
  methods: {
    reset(){
      //点击重置
      this.page.currentPage = 1;
      this.page.message=""
      this.getList();
    },
    search() {
      //点击搜索
      this.page.currentPage = 1;
      this.getList();
    },
    async saveNotice() {
      // 保存修改或添加的公告
      if (this.notice.title == "" || this.notice.title == null) {
        this.$message.error("公告标题不能为空");
        return;
      }
      if (this.notice.content.length < 5) {
        this.$message.error("公告内容不能为空");
        return;
      }
      await noticeSave(this.notice).then((res) => {
        if (res.data.code == 200) {
          this.getList();
          this.notice = {};
          this.dialogVisible = false;
          this.$message.success(res.data.msg);
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    handleClose(done) {
      //关闭弹出框，清空nitoce对象,
      this.notice = {};
      done();
    },
    handleAdd() {
      // 添加公告
      this.dialogVisible = true;
    },
    async handleEdit(id) {
      //点击编辑公告，弹出dialog,查找这个公告的具体信息
      // console.log(id);
      await getNotice(id).then((res) => {
        if (res.data.code == 200) {
          this.notice = res.data.data;
          this.dialogVisible = true;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    async handleDelete(id) {
      //删除公告
      await deleteNotice(id).then((res) => {
        if (res.data.code == 200) {
          this.getList();
          this.$message({
            showClose: true,
            type: "success",
            message: res.data.msg,
          });
        } else {
          this.$message.error("删除失败");
        }
      });
    },
    async getList() {
      await getNotices(this.page).then((res) => {
        if (res.data.code == 200) {
          if (this.page.message != "") {
            // this.$message.success(res.data.msg)
            //这里看看能不能把输入的字变红,就是说把res里面的那个公告数据中与输入的条件相同字符替换一下
            res.data.data.list.forEach((element) => {
              let parts1 = element.content.split(this.page.message);
              element.content = parts1.join(
                "<span style='color:red;'>" + this.page.message + "</span>"
              );
              let parts2 = element.title.split(this.page.message);
              element.title = parts2.join(
                "<span style='color:red;'>" + this.page.message + "</span>"
              );
            });
          }

          this.noticeList = res.data.data.list;
          // res.data.data.list.total这个是一共多少页
          this.page.total = res.data.data.total; //复制给list
        } else {
          this.$message.error(res.data.code + "::" + res.data.msg);
        }
      });
    },
    handleSizeChange(pageSize) {
      //改变每页尺寸触发事件
      this.page.pageSize = pageSize;
      this.getList();
    },
    handleCurrentChange(currentPage) {
      //改变当前页也会触发事件
      this.page.currentPage = currentPage;
      this.getList();
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
</style>